<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/admin/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/admin/css/global.css">
  <link rel="stylesheet" href="/static/admin/plugin/select2/css/select2.min.css">
  <link rel="stylesheet" href="/static/admin/plugin/layuiExtend/modules/css/formSelects.css">
  <style>
    body{
      zoom: 100%;
    }
  </style>
</head>
<body>

<form class="layui-form padding-top-20" action="{:url()}" method="post" onsubmit="return save_form2(this)">
  <input type="hidden" name="id" value="{$r.id}">
  <div class="layui-form-item">
    <label class="layui-form-label">菜单名称</label>
    <div class="layui-input-inline">
      <input type="text" name="name"  id="menu_name" value="{$r.name?$r.name:''}"  placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
      <span style="position: absolute;top:0;right: 0;" class="layui-btn" onclick="$('#href_select').show()">选择</span>
    </div>
  </div>

  <div class="layui-form-item" style="" id="href_select" hidden>
    <label class="layui-form-label">点击选择</label>
    <div class="layui-input-inline">
      <div id="tree"></div>
    </div>
    <div class="layui-form-mid layui-word-aux"></div>
  </div>

  <div class="layui-form-item" >
    <label class="layui-form-label ">父级菜单<span></span></label>
    <div class="layui-input-inline">
      <select lay-ignore name="pid" class="select2" style="width:100%" id="info_pid">
        <option value="">顶级</option>
        {foreach $pid_arr as $v}
        <option value="{$v.id}" {$v.id == $r.pid?'selected':''}>
        ┠
        {for start="1" end="$v.level"}
        --
        {/for}
        {$v.name}
        </option>
        {/foreach}
      </select>
      <div class="description"></div>
    </div>
    <div class="layui-form-mid layui-word-aux"></div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">菜单url</label>
    <div class="layui-input-inline" >
      <input type="text" name="href" id="info_href"  value="{$r.href?$r.href:''}"  placeholder="请输入菜单url" autocomplete="off" class="layui-input" style="width: 100%">
    </div>
  </div>



  <div class="layui-form-item">
    <label class="layui-form-label">是否显示</label>
    <div class="layui-input-inline">
      <input type="radio" name="is_show" value="1" title="显示" {$r.is_show?'checked':''} >
      <input type="radio" name="is_show" value="0" title="隐藏" {$r.is_show?'':'checked'} >
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">icon</label>
    <div class="layui-input-inline">
      <input type="text" name="icon" id="iconPicker" value="{$r.icon?$r.icon:'layui-icon-template-1'}" lay-filter="iconPicker" class="hide">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">排序</label>
    <div class="layui-input-inline">
      <input type="number" name="sort"  value="{$r.sort?$r.sort:''}"  placeholder="本层级排序" autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item flex-center submit-footer">
    <button type="submit" class="layui-btn">提交</button>
    <span class="layui-btn layui-btn-primary margin-left-50 close">取消</span>
  </div>
</form>

<script src="/static/admin/layuiadmin/layui/layui.js"></script>
<script src="/static/js/jquery-3.6.2.min.js"></script>
<script src="/static/admin/plugin/select2/js/select2.full.min.js"></script>
<script src="/static/js/crypto-js.min.js"></script>
<script src="/static/admin/js/global.js"></script>



<script>
  $('.select2').select2();
</script>

<script>
  layui.config({
    base: "/static/admin/plugin/layuiExtend/modules/",
  }).extend({
    iconPicker: 'js/iconPicker'
  });
  layui.use(['iconPicker'], function () {
    let  iconPicker = layui.iconPicker;
    iconPicker.render({
      // 选择器，推荐使用input
      elem: '#iconPicker',
      // 数据类型：fontClass/unicode，推荐使用fontClass
      type: 'fontClass',
      // 是否开启搜索：true/false
      search: true,
      // 是否开启分页
      page: false,
      // 每页显示数量，默认12
      limit: 12,
      // 点击回调
      click: function (data) {
      },
      // 渲染成功后的回调
      success: function(d) {
      }
    });

  });


  layui.config({
    base: '/static/admin/plugin/layuiExtend/modules/js/' //静态资源所在路径
  });
  layui.use(['form','jquery','authtree','jquery'], function() {
    var form = layui.form;
    var $ = layui.jquery;
    var authtree = layui.authtree;
    var trees = authtree.listConvert( {:json_encode($nodes)} , {
      primaryKey: 'id'
              , startPid: 0
              , parentKey: 'pid'
              , nameKey: 'name'
              , valueKey: 'id'
              , checkedKey: 'checked'
    });
    authtree.render('#tree', trees, {
      inputname: 'selected_path',
      layfilter: 'tree',
      autowidth: true,
      checkType: 'radio',
      autochecked: false,
    });

    authtree.on('change(tree)', ()=>{
      let val = $('[name=selected_path]:checked').val()
      val = val.slice(1);
      let title = $('[name=selected_path]:checked').attr('title')
      $('#info_href').val(val);
      $('#menu_name').val(title);
      $('#href_select').hide();
    })

  })
</script>

</body>
</html>
